import React, {Component} from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import loadable from '../utils/loadable';
import 'antd/dist/antd.css';
import MusicPlay from '../common/MusicPlay';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

const dynamicIndex = loadable(() => import('../containers/index'));
const dynamicSong = loadable(() => import('../containers/song'));
const dynamicDicoverToplist = loadable(() => import('../containers/discoverToplist'));
const dynamicDiscoverArtists = loadable(() => import('../containers/discoverArtist'));
const dynamicArtist = loadable(() => import('../containers/artist'));
const dynamicMvDetail = loadable(() => import('../containers/mvDetail'));
const dynamicSetting = loadable(() => import('../components/setting'));
const dynamicUserLevel = loadable(() => import('../components/userLevel'));
const dynamicAboutPri = loadable(() => import('../components/userLevel/aboutPri'));
const dynamicRecommendMV = loadable( () => import('../containers/recommendMV'))
const dynamicMyMusic = loadable( () => import('../containers/myMusic'))



class AllRoute extends Component {

    render() {
        return (
            <Layout>
                <Content>
                    <Router>
                        <Switch>
                            <Route path='/' exact component={ dynamicIndex } />
                            <Route path='/discover' exact component={ dynamicIndex } />
                            <Route path='/song' component={ dynamicSong } />
                            <Route path='/discover/toplist' component={ dynamicDicoverToplist } />
                            <Route path='/discover/artist/signed' component={dynamicDiscoverArtists} />
                            <Route path='/discover/artist/cat' component={dynamicDiscoverArtists} />
                            <Route path='/user/level' component={dynamicUserLevel} />
                            <Route path='/aboutPri' component={dynamicAboutPri} />
                            <Route path='/acquire/artist' component={dynamicArtist} />
                            <Route path="/mvDetail" component={dynamicMvDetail} />
                            <Route path="/setting" component={dynamicSetting} />
                            <Route path="/recommendMV" component={dynamicRecommendMV} />
                            <Route path="/myMusic" component={dynamicMyMusic} />
                        </Switch>
                    </Router>
                </Content>
                <Footer>
                    <MusicPlay />
                </Footer>
            </Layout>
        );
    }
}

export default connect()(AllRoute)
